'use client'
import React, { createContext, useContext, useState, ReactNode } from 'react'

interface NavigationContextProps {
  showNavigation: boolean
  setShowNavigation: (show: boolean) => void
}

const NavigationContext = createContext<NavigationContextProps | undefined>(
  undefined,
)

// export const NavigationProvider = ({ children }: { children: ReactNode }) => {
export const NavigationProvider = ({
  children,
  Navigation,
}: {
  children: React.ReactNode
  Navigation: React.ComponentType
}) => {
  const [showNavigation, setShowNavigation] = useState(false)

  return (
    <NavigationContext.Provider value={{ showNavigation, setShowNavigation }}>
      {showNavigation ? (
        <>
          <Navigation />
          <div className="h-[calc(100vh-50px)]">{children}</div>
        </>
      ) : (
        children
      )}
    </NavigationContext.Provider>
  )
}

export const useNavigation = () => {
  const context = useContext(NavigationContext)
  if (context === undefined) {
    throw new Error('useNavigation must be used within a NavigationProvider')
  }
  return context
}
